<template>
	<view style="padding: 60upx;background-color: #EBEBEB;">
		<input class="input" v-model="username" :min="6" :max="20" placeholder="请输入账号(6-20位字母与数字的组合)"></input>
		<input type="password" v-model="password" :min="6" :max="30" class="input" placeholder="请输入密码(6-30位字母与数字的组合)"></input>
		<input type="password" v-model="checkPassword" :min="6" :max="30" class="input" placeholder="请再次输入密码"></input>
		<!-- :value="checkpassword" -->
		<picker mode=selector @change="bindPickerChange" style="color: #666666" class="input" :range="questions" placehoFlder="请输入密保问题">
			<view>{{passwordQuestion}}</view>
		</picker>
		<input :required="true" :min="2" :max="30" class="input" v-model="passwordAnswer" placeholder="请输入验证答案"></input>
		<input :required="true" class="input" :value="nickname" v-model="nickname" placeholder="请输入用户昵称"></input>
		<!-- <input :min="4" class="input" v-model="mark" placeholder="请输入上级用户标识"></input> -->
		<view style="display: flex;justify-content: space-between;">
			<input :min="4" class="input" v-model="captcha" placeholder="请输入验证码" style="width: 170px;"></input>
			<img :src="captchaPath" height="38" @click="getCaptcha()" alt="" style='margin-top: 2px;'>
		</view>
		<button type="primary" class="login-btn" @click="login">提交</button>
	</view>
</template>

<script>
	import {get,post,showToast} from '../../js/common';
	import HMmessages from "@/components/HM-messages/HM-messages.vue"
	export default {
		components: {
			HMmessages
		},
		data() {
			return {
				uuid: '',
				captcha: '',
				captchaPath: '',
				username: '',
				password: '',
				questions: ['您小学的名字？', '您父亲的名字？', '您母亲的名字？', '您最喜欢的书？'],
				index: 0,
				checkPassword: '',
				nickname: '',
				passwordQuestion: '',
				passwordAnswer: '',
				mark: ''
			};
		},
		onLoad(options) {
			this.mark = options.mark ? options.mark : ''
			this.passwordQuestion = this.questions[0]
		},
		onShow() {
			this.getCaptcha(1)
		},
		methods: {
			bindPickerChange(e) {
				let index = e.detail.value
				this.passwordQuestion = this.questions[index]
			},
			getUUID() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
					return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
				})
			},
			getCaptcha() {
				this.uuid = this.getUUID()
				 this.captchaPath = "http://39.105.185.57:9002/mobileapi/mobile/captcha.jpg?uuid=" + this.uuid
				// this.captchaPath = 'http://192.168.10.43:9002/mobileapi/mobile/captcha.jpg?uuid=' + this.uuid
			},
			login() {
				if (this.username == '' || this.password == '') {
					uni.showToast({
						title: '用户名和密码不能为空',
                        icon: 'none'
					});
					return;
				}
				if (this.password != this.checkPassword) {
					uni.showToast({
						title: '密码输入不一致',
						icon: 'none'
					});
					return;
				}
				if (this.passwordAnswer == '') {
					uni.showToast({
						title: '请输入验证答案',
						icon: 'none'
					});
					return;
				}
				if (this.captcha == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none'
					});
					return;
				}
				const params = {
					uuid: this.uuid,
					captcha: this.captcha,
					username: this.username,
					password: this.password,
					checkPassword: this.checkPassword,
					nickname: this.nickname,
					passwordQuestion: this.passwordQuestion,
					passwordAnswer: this.passwordAnswer,
				}
				if (this.mark) {
					params.mark = this.mark
					post('mobileapi/mobile/disUserRegister', params).then(res => {
						uni.setStorageSync('token', res.token)
						uni.setStorageSync('userId', res.userId)
						if (res.code == 0) {
							uni.showToast({
								title: '注册成功'
							})
							uni.redirectTo({
								url: '../login/index?mark=' + this.mark
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} else {
					post('mobileapi/mobile/register', params).then(res => {
						uni.setStorageSync('token', res.token)
						uni.setStorageSync('userId', res.userId)
						if (res.code == 0) {
							uni.showToast({
								title: '注册成功'
							});
							uni.navigateBack(1)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					})
				}
				
			}
		},
	}
</script>

<style>
	.login-btn {
		margin-top: 40upx;
		background: #D7000F;
	}
</style>
